<template>
  <div>
    <div class="tabNav">
      <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
      </router-link>
      <router-link to="/service">
        <b class="colors"
          >/<img src="../assets/img/sidebar4.png" />服务者信息</b
        >
      </router-link>
      <b
        >/<i
          style="font-size: 16px; margin-right: 5px"
          class="el-icon-s-order"
        ></i
        >服务者信息详情</b
      >
      <!-- <el-input
        placeholder="请输入灵活用工平台名称进行搜索"
        suffix-icon="el-icon-search"
        v-model="input1"
      >
      </el-input> -->
      <em v-if="Object.keys(infoObject).length > 0" style="margin-left: -5px">{{
        infoObject.name
      }}</em>
    </div>
    <el-row :gutter="24" style="margin-bottom: 20px">
      <el-col :span="24">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="pad-loader" v-if="Object.keys(infoObject).length == 0">
            <content-loader
              :width="710"
              :height="300"
              :speed="3"
              primaryColor="#f3f3f3"
              secondaryColor="#ecebeb"
            >
              <rect x="98" y="20" rx="6" ry="6" width="300" height="10" />
              <rect x="98" y="50" rx="6" ry="6" width="352" height="10" />
              <rect x="0" y="100" rx="6" ry="6" width="710" height="10" />
              <rect x="0" y="130" rx="6" ry="6" width="680" height="10" />
              <rect x="0" y="160" rx="6" ry="6" width="478" height="10" />
              <circle cx="40" cy="40" r="40" />
            </content-loader>
          </div>
          <div v-else>
            <div class="information">
              <img class="infoImg" src="../assets/img/img.jpg" />
              <div class="infoTit">
                <b>{{ infoObject.name }}</b>
                <span>性别：{{ infoObject.sexMsg }}</span>
                <span style="border: 0; margin-left: 10px"
                  >{{
                    infoObject.isBusiness == 0 ? "未" : "已"
                  }}办理个体工商户</span
                >
              </div>
            </div>
            <div class="infoCon">
              <b style="width: 100%"
                ><em>身份证号：</em>{{ infoObject.idcard }}</b
              >
              <b style="width: 100%"
                ><em>联系电话：</em>{{ infoObject.phone }}</b
              >
              <b style="width: 100%"
                ><em>统一社会信用代码：</em>{{ infoObject.idcard }}</b
              >
              <b style="width: 100%"
                ><em>家庭住址：</em>{{ infoObject.address }}</b
              >
              <b style="width: 100%">
                <em>身份证正反面照片：</em>
                <div style="display: flex">
                  <div class="image-box">
                    <el-image
                      :preview-src-list="[
                        infoObject.idcardFrondUrl,
                        infoObject.idcardBackUrl,
                      ]"
                      :src="infoObject.idcardFrondUrl"
                    ></el-image>
                  </div>
                  <div class="image-box">
                    <el-image
                      :preview-src-list="[
                        infoObject.idcardFrondUrl,
                        infoObject.idcardBackUrl,
                      ]"
                      :src="infoObject.idcardBackUrl"
                    ></el-image>
                  </div>
                </div>
              </b>
              <b style="width: 100%">
                <em>意愿协议视频：</em>
                <div class="image-box" v-if="infoObject.wishVideoUrl != null && infoObject.wishVideoUrl != ''" @click="openVideo">
                  <div style="position: relative; width:100%;height:100%;">
                    <video style="width:100%;height:100%;">
                      <source
                        :src="infoObject.wishVideoUrl"
                        type="video/mp4"
                      />
										</video>
                    <div style="position: absolute; left: 0; left: 0;width:100%;height:100%;background-color: #FFF;top: 0;opacity: 0;"></div>
                  </div>
                  <!-- <el-image :src="require('../assets/img/video.png')"></el-image> -->
                </div>
                <span style="padding-top:0; text-align:left" v-else>-</span>
              </b>
              <!-- <b>
								<em>委托协议书：</em>
								<a style="color:rgb(50, 108, 240); cursor:pointer" @click="openUrl(infoObject.authAgreementUrl)">委托协议书</a>
							</b> -->
              <b style="width: 100%">
                <em>授权委托书：</em>
                <a
                  style="color: rgb(50, 108, 240); cursor: pointer"
                  @click="openUrl(infoObject.authAgreementUrl)"
                  v-if="infoObject.authAgreementUrl"
                  >授权委托书</a
                >
                <span style="padding-top:0; text-align:left" v-else>-</span>
              </b>
              <b style="width: 100%">
                <em>平台协议书：</em>
                <a
                  style="color: rgb(50, 108, 240); cursor: pointer"
                  @click="openUrl(infoObject.platformAgreementUrl)"
                  v-if="infoObject.platformAgreementUrl"
                  >平台协议书</a
                >
                <span style="padding-top:0; text-align:left" v-else>-</span>
              </b>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="cardTits cardTitss cardTitee" shadow="hover">
          <div class="cardTit">
            任务信息
            <router-link to="/assignment">
              <b>更多<i class="el-icon-arrow-right"></i></b>
            </router-link>
            <em v-if="Object.keys(taskCount).length > 0"
              ><i
                style="font-size: 16px; margin-right: 5px"
                class="el-icon-s-data"
              ></i
              ><span>接收数量：{{ taskCount.taskNum }}</span
              ><span>进行中任务：{{ taskCount.hanldingTaskNum }}</span
              ><span style="border: 0"
                >已结束任务：{{ taskCount.finishedTaskNum }}</span
              ></em
            >
          </div>
          <v-tasktable :serviceId="$route.query.id"></v-tasktable>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" v-if="infoObject.isBusiness == 1">
      <el-col :span="24">
        <el-card class="cardTits cardTitss cardTitee" shadow="hover">
          <div class="cardTit">
            发票信息
            <router-link to="/invoice">
              <b>更多<i class="el-icon-arrow-right"></i></b>
            </router-link>
            <em
              ><i
                style="font-size: 16px; margin-right: 5px"
                class="el-icon-s-data"
              ></i
              ><span style="border: 0">发票总数量：{{ invoiceCount }}</span></em
            >
          </div>
          <invoice-table
            :invoiceType="1"
            :serviceId="$route.query.id"
          ></invoice-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="cardTits cardTitss cardTitee" shadow="hover">
          <div class="cardTit" style="font-weight: normal">
            关注企业列表
          </div>
          <el-table :data="weiguanzhu" ref="multipleTable" stripe style="width: 100%">
            <el-table-column prop="" label="" width="50">
            </el-table-column>
            <el-table-column prop="name" label="企业名称">
            </el-table-column>
            <el-table-column prop="socialCreditCode" label="统一社会信用代码">
            </el-table-column>
            <el-table-column prop="attentionTime" label="关注时间">
              <template #default="item">
                {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.attentionTime)) }}
              </template>
            </el-table-column>
            <el-table-column prop="examineStatus" label="审核状态">
              <template #default="item">
                {{item.row.examineStatus == 0 ? "待审核" : "已关注"}}
              </template>
            </el-table-column>
            <el-table-column prop="examineTime" label="审核时间">
              <template #default="item">
                <span v-if="item.row.examineTime == null || item.row.examineTime == ''">-</span>
                <span v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.examineTime)) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="意见协议视频"
      v-model="playerVideo"
      @close="closeVideo"
      width="780px"
    >
      <div class="videoPlayer-style">
        <video ref="videoPlayer" class="video-js vjs-default-skin" poster="">
          <source :src="infoObject.wishVideoUrl" type="video/mp4" />
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vTasktable from "../components/table/Tasktable.vue";
import InvoiceTable from "../components/table/InvoiceTable.vue";
// 内容占位符
import { ContentLoader } from "vue-content-loader";
export default {
  name: "dashboard",
  data() {
    return {
      weiguanzhu: [],
      input1: "",
      playerVideo: false,
      player: null,
      infoObject: {},
      invoiceCount: 0,
      taskCount: {},
    };
  },
  components: {
    vTasktable,
    InvoiceTable,
    ContentLoader,
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    },
  },
  mounted() {
    this.getInfoDel();
    this.getTaskCount();
    this.againAgreementAlerts();
  },
  methods: {
    openVideo() {
      this.playerVideo = true;
      if (this.player != null) return false;
      let options = {
        controls: true, // 是否显示底部控制栏
        preload: "auto", // 加载<video>标签后是否加载视频
        autoplay: "muted", // 静音播放
        // playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
        width: "740",
        height: "360",
        fluid: true,
        controlBar: {
          // 自定义按钮的位置
          children: [
            {
              name: "playToggle",
            },
            {
              name: "progressControl",
            },
            {
              name: "currentTimeDisplay",
            },
            {
              name: "timeDivider",
            },
            {
              name: "durationDisplay",
            },

            {
              name: "volumePanel", // 音量调整方式横线条变为竖线条
              inline: false,
            },
            {
              name: "pictureInPictureToggle", //画中画播放模式
            },
            {
              name: "fullscreenToggle",
            },
          ],
        },
      };
      setTimeout(() => {
        this.player = this.$video(
          this.$refs.videoPlayer,
          options,
          function onPlayerReady() {
            console.log("onPlayerReady", this);
          }
        );
      }, 500);
    },
    closeVideo() {
      // 关闭视频
      this.player.pause();
    },
    getInfoDel() {
      // 获取详情信息
      this.$http({
        url: "/api/sevicer/selectSevicerById?sevicerId=" + this.$route.query.id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code === 0) {
          this.infoObject = data.result;
        }
      });
    },
    getInvoice() {
      // 获取发票数量
      this.$http({
        url:
          "/api/sevicer/selectInvoiceInfoBySevicerId?sevicerId=" +
          this.$route.query.id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code === 0) {
          this.invoiceCount = data.result;
          if (data.result.isBusiness == 1) {
            this.getInvoice();
          }
        }
      });
    },
    againAgreementAlerts() {
      // 关注企业列表
      this.$http({
        url: "/api/consumer/followList?sevicerId=" + this.$route.query.id,
        method: "post",
        headers: {
        "Content-Type": "application/json",
        }
      }).then((data) => {
        if (data.code == 0) {
          this.weiguanzhu = data.result
        }
      });
    },
    getTaskCount() {
      // 获取任务数量
      this.$http({
        url:
          "/api/sevicer/selectTaskCountBySevicerId?sevicerId=" +
          this.$route.query.id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code === 0) {
          this.taskCount = data.result;
        }
      });
    },
    openUrl(url) {
      // 打开新窗口查看协议
      this.$http({
        url: "/api/quick/server/consumer/pdfPreView",
        method: "post",
        params: {
          ossPath: url
        },
        responseType: 'blob'
      }).then((data) => {
        const blob = new Blob([data]);
        const href = window.URL.createObjectURL(blob)
        window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
      });
    },
  },
};
</script>
<style>
.videoPlayer-style {
  width: 740px;
  height: 360px;
  text-align: center;
}
.vjs-default-skin {
  width: 740px !important;
  height: 360px !important;
  padding-top: 0 !important;
}
.video-js .vjs-big-play-button {
  top: 50%;
  margin-top: -0.75rem;
  left: 50%;
  margin-left: -1.5rem;
}
</style>
